<template>
  <view class="searchDetail">
    <view class="title flex">物流单号/尾程单号：{{id}}
		<image @click="$utils.copyMessage(id)" src="@/static/icon/copy-icon.png" class="copy-btn" mode="aspectFill"></image>
	</view>
    <view class="box">
      <view class="name">物流信息</view>
      <view class="steps" v-if="stepList && stepList.length">
        <u-steps
          current="3"
          direction="column"
          activeColor="#2354E3"
          inactiveColor="#2354E3"
          :inactiveIcon="inactiveIcon"
          :activeIcon="activeIcon"
        >
          <u-steps-item v-for="(item, index) in stepList" :key="index">
            <view class="item" slot="desc">
              <view class="time">{{timeFormat(item.time_iso)}}</view>
              <view class="step">{{item.location||''}}{{item.location?',':''}}{{ item.description }}</view>
            </view>
          </u-steps-item>
        </u-steps>
      </view>
	  <view v-else class="empty" >
	  	未查询到物流信息
	  </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      stepList: [],
      activeIcon: "/static/icon/activation.png",
      inactiveIcon: "/static/icon/activation.png",
	  id:'',
	  resData:''
    };
  },

  onLoad(optipns) {
	  uni.showLoading({
	  	title:"查询中"
	  })
	   this.id = optipns.id || optipns.title;
	  if(optipns.id || optipns.title){
		  this.$api.post({
		      url: "/ebapi/public_api/track",
		      data:{
				  number:optipns.id||optipns.title
			  },
			  success: (resData) => {
				  if(resData.data && resData.data.accepted && resData.data.accepted[0] && resData.data.accepted[0].track_info && resData.data.accepted[0].track_info.tracking && resData.data.accepted[0].track_info.tracking.providers && resData.data.accepted[0].track_info.tracking.providers[0] && resData.data.accepted[0].track_info.tracking.providers[0].events){
				  	this.stepList = resData.data.accepted[0].track_info.tracking.providers[0].events;
				  	uni.hideLoading();
				  	console.log(this.stepList,"stepList")
				  }
			  },
			})
		 //  uni.request({
		 //  	url:'https://api.17track.net/track/v2/register',
		 //  	method:'post',
			// header:{
			// 	'17token':'DD24944BC59386EE50B0D3CD166D90CF',
			// 	'Content-Type':'application/json'
			// },
			// data:[{
			// 	"number" : optipns.id||optipns.title
			// }],
		 //  	success:res=>{
			// 	let resData = res.data;
			// 	 // && resData.data.rejected[0].error.code == '-18019901'
			// 	 // 已经注册过或者注册成功
			// 	if((resData.data && resData.data.rejected && resData.data.rejected[0] && resData.data.rejected[0].error)||resData.data && resData.data.accepted &&resData.data.accepted[0]){
			// 		this.getLogistics(optipns.id||optipns.title); 	//获取物流数据
			// 	}else{
			// 		uni.hideLoading();
			// 	}
		 //  	}
		 //  })
	  }
  },

  methods: {
	  timeFormat(time){
		  let times = time.replace(/T/g,' ');
		  let index = time.lastIndexOf('-');
		  let index1 = time.lastIndexOf('+');
		  let sureIndex;
		  if(index1>index){
			  sureIndex = index1;
		  }else{
			  sureIndex = index;
		  }
		  return times.substr(0,sureIndex);
	  },
	  getLogistics(num){
		  uni.request({
		  	url:'https://api.17track.net/track/v2/gettrackinfo',
		  	method:'post',
		  			header:{
		  				'17token':'DD24944BC59386EE50B0D3CD166D90CF',
		  				'Content-Type':'application/json'
		  			},
		  			data:[{
						// 9871507901737
		  				"number" : num
		  			}],
		  	success:res=>{
				let resData = res.data;
				// 获取物流数据
				if(resData.data && resData.data.accepted && resData.data.accepted[0] && resData.data.accepted[0].track_info && resData.data.accepted[0].track_info.tracking && resData.data.accepted[0].track_info.tracking.providers && resData.data.accepted[0].track_info.tracking.providers[0] && resData.data.accepted[0].track_info.tracking.providers[0].events){
					this.stepList = resData.data.accepted[0].track_info.tracking.providers[0].events;
					uni.hideLoading();
					console.log(this.stepList,"stepList")
				}
		  	}
		  })
	  }
  },
};
</script>

<style lang="scss">
.searchDetail {
  font-size: $uni-text-size-title;

  .title {
    width: 702rpx;
    height: 100rpx;
    line-height: 100rpx;
    background: #ffffff;
    box-shadow: 0rpx 0rpx 6rpx 1rpx rgba(0, 0, 0, 0.16);
    border-radius: 8rpx;
    opacity: 1;
    margin: 40rpx 0 35rpx;
    padding-left: 45rpx;
  }

  .box {
    width: 702rpx;
    min-height: 1155rpx;
    background: #ffffff;
    box-shadow: 0rpx 0rpx 6rpx 1rpx rgba(0, 0, 0, 0.16);
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    opacity: 1;
    padding: 35rpx 45rpx;

    .name {
      color: #666666;
    }

    .steps {
      margin: 60rpx 110rpx;

      .item {
        font-size: $uni-text-size-title;
        font-weight: bold;
		padding-bottom: 60rpx;

        .time {
          color: $uni-color-main;
        }

        .step {
          color: #333333;
        }
      }
    }
  }
}
</style>
